<template>
  <div class="bigbox">
    <div class="bbbbb">
      <div class="qqq">
        <div class="www">
          <div class="ttt">
            <el-image
              style="width: 120px; height: 80px"
              :src="list.img"
            ></el-image>
          </div>
          <div class="rrr">
            <div>{{ list.title }}</div>
            <div>开播时间{{ list.shijian }}</div>
            <div>结束时间{{ list.shijian }}</div>
            <div>直播时长3小时24分钟</div>
            <div>主播：{{ list.name }}</div>
          </div>
        </div>
        <div class="yyy">
          <div class="uuu">
            <div>
              观看人数
            </div>
            <div>{{ list.gknum }}人</div>
          </div>
          <div class="uuu">
            <div>
              最高在线人数
            </div>
            <div>{{ list.gknum }}人</div>
          </div>
          <div class="uuu">
            <div>
              新增粉丝数
            </div>
            <div>{{ list.dznum }}人</div>
          </div>
          <div class="uuu">
            <div>
              购买人数
            </div>
            <div>{{ list.xdnum }}人</div>
          </div>
        </div>
      </div>
      <div>
        <div>
          <div id="chartLineBox" style="width: 90%;height: 300px;"></div>
        </div>
        <div>
          <div id="chartBox" style="width: 90%;height: 300px;"></div>
        </div>
      </div>
      <div>
        <div>销售商品分析</div>
        <div>
          <el-table :data="list.fenxi" border style="width: 100%">
            <div></div>
            <el-table-column prop="id" label="商品ID" width="80">
            </el-table-column>
            <el-table-column prop="img" label="商品图片" width="180">
              <template slot-scope="scope">
                <el-image
                  style="width:50px;height:50px"
                  :src="scope.row.img"
                  alt=""
                />
              </template>
            </el-table-column>
            <el-table-column
              prop="title"
              label="商品名称"
              width="180"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column prop="price" label="商品价格" width="180">
            </el-table-column>
            <el-table-column prop="guige" label="商品规格" width="180">
            </el-table-column>
            <el-table-column prop="cishu" label="点击次数" width="180">
            </el-table-column>
            <el-table-column prop="xiadan" label="下单次数" width="180">
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import echarts from "echarts";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      list: []
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {},
  mounted() {
    this.chartLine = echarts.init(document.getElementById("chartLineBox"));
    this.chartbox = echarts.init(document.getElementById("chartBox"));
    // 指定图表的配置项和数据
    var option = {
      tooltip: {
        //设置tip提示
        trigger: "axis"
      },

      legend: {
        //设置区分（哪条线属于什么）
        data: ["平均成绩", "学生成绩"]
      },
      color: ["#8AE09F", "#FA6F53"], //设置区分（每条线是什么颜色，和 legend 一一对应）
      xAxis: {
        //设置x轴
        type: "category",
        boundaryGap: false, //坐标轴两边不留白
        data: [
          "2019-1-1",
          "2019-2-1",
          "2019-3-1",
          "2019-4-1",
          "2019-5-1",
          "2019-6-1",
          "2019-7-1"
        ],
        name: "DATE", //X轴 name
        nameTextStyle: {
          //坐标轴名称的文字样式
          color: "#FA6F53",
          fontSize: 16,
          padding: [0, 0, 0, 20]
        },
        axisLine: {
          //坐标轴轴线相关设置。
          lineStyle: {
            color: "#FA6F53"
          }
        }
      },
      yAxis: {
        name: "SALES VOLUME",
        nameTextStyle: {
          color: "#FA6F53",
          fontSize: 16,
          padding: [0, 0, 10, 0]
        },
        axisLine: {
          lineStyle: {
            color: "#FA6F53"
          }
        },
        type: "value"
      },
      series: [
        {
          name: "平均成绩",
          data: [220, 232, 201, 234, 290, 230, 220],
          type: "line", // 类型为折线图
          lineStyle: {
            // 线条样式 => 必须使用normal属性
            normal: {
              color: "#8AE09F"
            }
          }
        },
        {
          name: "学生成绩",
          data: [120, 200, 150, 80, 70, 110, 130],
          type: "line",
          lineStyle: {
            normal: {
              color: "#FA6F53"
            }
          }
        }
      ]
    };

    // 使用刚指定的配置项和数据显示图表。
    this.chartLine.setOption(option);
    this.chartbox.setOption(option);
  },
  created() {
    this.list = this.$route.query.list;
  },
  methods: {}
};
</script>
<style type="text/scss">
.el-table td,
.el-table th {
  text-align: center !important;
}
</style>
<style lang="scss" scoped>
.bigbox {
  width: 100%;
  height: 100%;
  padding: 15px;
  background: #f5f5f5;
}
.bbbbb {
  width: 100%;
  height: 450px;
  background-color: #fff;
  padding: 0 15px;
  overflow-y: scroll;
}
.qqq {
  width: 100%;
  height: 100px;
  display: flex;
  .www {
    display: flex;
    .ttt {
      margin-top: 10px;
    }
    .rrr {
      margin-left: 10px;
    }
  }
  .yyy {
    display: flex;
    margin-left: 200px;
    text-align: center;
    .uuu {
      margin: 30px;
    }
  }
}
</style>
